<%@page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript" src="<c:url value="/js/jquery-validate/jquery.validate.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-validate/localization/messages_es.js"/>"></script>	
<script>
    var persona_id = null;
    <c:if test="${not empty personaId}">
        persona_id = <c:out value="${personaId}"/>
    </c:if>    
    var persona = {
    		id : "",
    		apellido : "",
    		nombre : "",
    		tipoDoc : "",
    		numeroDoc : "",
    		nacionalidad : "",
    		fechaNacimiento : "",
    		direccion : "",
    		ciudad : "",
    		telefono : "",
    		telefonoMovil : "",
    		telefonoAlternativo : "",
    		email : "",
    		emailAlternativo : ""
    }
    $(document).ready(function(){
        $("#mensaje").parent().hide();
        $(".button").button();
        $(".datepicker").live('click', function() {
            $(this).datepicker({
    	        showOn:'focus',
    	        dateFormat : 'dd-mm-yy'
    	        }).focus();
            });
        
        var $form_persona = $("#form_persona");
        $form_persona.submit(function(){return false;});
        $form_persona.validate();
        
        $("#volver").click(function(){
            window.location.href = '<c:url value="/app/page/persona"/>';
        });
        
        $form_persona.hide();
        definirFormulario();
    });
    
    
    function definirFormulario() {
        var $crear_actualizar = $("#crear_actualizar"); 
        
        $.dataLink( "#form_persona", persona );
        if (persona_id == null) {
            $("#form_persona").show();
            $crear_actualizar.bind("click", crearPersona);
            $.dataLink( persona, "#form_persona").pushValues();
        } else {
            jQuery.ajax({
                type : 'GET',
                url : '<c:url value="/app/persona/id/"/>' + persona_id ,
                contentType : 'application/json',
                dataType : 'json',
                success : servicioObtenerPersonaSuccessCallBack,
                error : servicioObtenerPersonaErrorCallBack

            });
        }
    }
    
    
    
    
   	function crearPersona(){
        if (!$("#form_persona").valid()){
            return false;
        }  
        jQuery.ajax({
            type : 'POST',
            url : '<c:url value="/app/persona"/>',
            contentType : 'application/json',
            dataType : 'json',
            data : $.toJSON(persona),
            success : servicioIngresarPersonaSuccessCallBack,
            error : servicioIngresarPersonaErrorCallBack

        });
    }
    function actualizarPersona(){
        if (!$("#form_persona").valid()){
            return false;
        }  
        jQuery.ajax({
            type : 'PUT',
            url : '<c:url value="/app/persona"/>',
            contentType : 'application/json',
            dataType : 'json',
            data : $.toJSON(persona),
            success : servicioActualizarPersonaSuccessCallBack,
            error : servicioActualizarPersonaErrorCallBack

        });
    }
    
    
    function servicioObtenerPersonaSuccessCallBack(data) {
        jsonObjectMerge(data, persona);
        persona.fechaNacimiento = australianDateConvert(persona.fechaNacimiento); 
        
        var $crear_actualizar = $("#crear_actualizar"); 
        $crear_actualizar.bind("click", actualizarPersona);
        $("#crear_actualizar span").text("Actualizar persona");
        $("#breadcrumb_actual").text("Actualizando "+persona.apellido + ", " + persona.nombre);
        $("#form_persona").show();
        $.dataLink( persona, "#form_persona").pushValues();
    } 
    function servicioIngresarPersonaSuccessCallBack(data) {
        jsonObjectMerge(data, persona);
        persona.fechaNacimiento = australianDateConvert(persona.fechaNacimiento); 
        servicioSuccessMensaje("#mensaje","La persona se ingres&oacute; correctamente en el sistema");
        $("#crear_actualizar").unbind("click").bind("click", actualizarPersona);
        $("#crear_actualizar span").text("Actualizar persona");
        $("#breadcrumb_actual").text("Actualizando "+persona.apellido + ", " + persona.nombre);
    } 
    function servicioActualizarPersonaSuccessCallBack(data) {
        jsonObjectMerge(data, persona);
        persona.fechaNacimiento = australianDateConvert(persona.fechaNacimiento); 
        servicioSuccessMensaje("#mensaje","La persona se actualiz&oacute; correctamente");
    }
    function servicioObtenerPersonaErrorCallBack(data) {
        servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al obtener informaci&oacute;n de la persona", data);
    }
    function servicioActualizarPersonaErrorCallBack(data) {
        servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al actualizar la informaci&oacute;n de la persona", data);
    }
    function servicioIngresarPersonaErrorCallBack(data) {
        servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al ingresar la la informaci&oacute;n de la persona", data);
    }
</script>
    <div class="row">
        <h2>Personas</h2>
        <div class="contenedor_mensaje col col_16">
            <div  id="mensaje"></div>
        </div>
    </div>
    <div class="row steps content_form">
        <div class="col col_3">&nbsp;</div>
        <div class="col col_10">
            <form id="form_persona" name="form_persona">
	            <fieldset class="step s_column" id="seccion_persona">
		        <legend>Persona</legend>
		            <div>
			            <label for="persona.apellido">Apellido*</label> 
			            <input id="persona.apellido" name="persona[]apellido" type="text" class="required" data-jq-linkto="apellido" data-jq-linkfrom="apellido"/>
			            <input type="hidden" name="persona[]id" id="persona_id" data-jq-linkto="id" data-jq-linkfrom="id"/>
		            </div>
		            <div>
			            <label for="persona.nombre">Nombre*</label> 
			            <input id="persona.nombre" name="persona[]nombre" type="text" class="required"  data-jq-linkto="nombre" data-jq-linkfrom="nombre"/>
		            </div>
		            <div>
			            <label for="persona.tipoDoc">Documento(tipo)</label> 
			            <input id="persona.tipoDoc" name="persona[]tipoDoc" type="text" data-jq-linkto="tipoDoc" data-jq-linkfrom="tipoDoc"/>
		            </div>
		            <div>
			            <label for="persona.numeroDoc">N&uacute;mero de documento</label> 
			            <input id="persona.numeroDoc" name="persona[]numeroDoc" type="text" class="number" data-jq-linkto="numeroDoc" data-jq-linkfrom="numeroDoc"/>
		            </div>
		            <div>
			            <label for="persona.nacionalidad">Nacionalidad</label> 
			            <input id="persona.nacionalidad" name="persona[]nacionalidad" type="text" data-jq-linkto="nacionalidad" data-jq-linkfrom="nacionalidad" />
		            </div>
		            <div>
			            <label for="persona.fechaNacimiento">Fecha de nacimiento</label> 
			            <input id="persona.fechaNacimiento" name="persona[]fechaNacimiento" type="text" class="datepicker" data-jq-linkto="fechaNacimiento" data-jq-linkfrom="fechaNacimiento" />
		            </div>
		            <div>
			            <label for="persona.direccion">Direcci&oacute;n</label> 
			            <input id="persona.direccion" name="persona[]direccion" type="text" data-jq-linkto="direccion" data-jq-linkfrom="direccion" />
		            </div>
		            <div>
			            <label for="persona.ciudad">Ciudad</label> 
			            <input id="persona.ciudad" name="persona[]ciudad" type="text" data-jq-linkto="ciudad" data-jq-linkfrom="ciudad" />
		            </div>
		            <div>
			            <label for="persona.pais">Pa&iacute;s</label> 
			            <input id="persona.pais" name="persona[]pais" type="text" data-jq-linkto="pais" data-jq-linkfrom="pais"/>
		            </div>
		            <div>
			            <label for="persona.telefono">Tel&eacute;fono particular</label> 
			            <input id="persona.telefono" name="persona[]telefono" type="text" class="number" data-jq-linkto="telefono" data-jq-linkfrom="telefono"/>
		            </div>
		            <div>
			            <label for="persona.telefonoMovil">Tel&eacute;fono m&oacute;vil</label> 
			            <input id="persona.telefonoMovil" name="persona[]telefonoMovil" type="text" class="number" data-jq-linkto="telefonoMovil" data-jq-linkfrom="telefonoMovil"/>
		            </div>
		            <div>
			            <label for="persona.telefonoAlternativo">Otro tel&eacute;fono</label> 
			            <input id="persona.telefonoAlternativo" name="persona[]telefonoAlternativo" type="text" data-jq-linkto="telefonoAlternativo" data-jq-linkfrom="telefonoAlternativo"/>
		            </div>
		            <div>
			            <label for="persona.email">E-mail #1*</label> 
			            <input id="persona.email" name="persona[]email" type="text" class="required email" data-jq-linkto="email" data-jq-linkfrom="email"/>
		            </div>
		             <div>
			            <label for="persona.emailAlternativo">E-mail #2</label> 
			            <input id="persona.emailAlternativo" name="persona[]emailAlternativo" type="text" class="email" data-jq-linkto="emailAlternativo" data-jq-linkfrom="emailAlternativo"/>
		            </div>
		        </fieldset>
		        <button class="button" id="crear_actualizar">Crear </button>
                <button class="button" id="volver" class="cancel">Volver al listado</button>
		    </form>
		    
        </div>
        <div class="col col_3">&nbsp;</div>
    </div>        
